import React, { useState } from "react";
import { ActionPanel } from "./actionPanel";
import { UserList } from "./list";
import { useMount, useArray } from "utils";
const apiUrl = process.env.REACT_APP_API_URL;
interface User {
  name: string;
  id: number;
}
export const DemoArray = () => {
  // const [users,setUsers] = useState([])
  const {
    value: users,
    setValue: setUsers,
    add,
    removeItem,
    clear,
  } = useArray([] as User[]);
  useMount(() => {
    fetch(`${apiUrl}/users`).then(async (res) => {
      if (res.ok) {
        setUsers(await res.json());
      }
    });
  });
  return (
    <div>
      <ActionPanel add={add} removeItem={removeItem} clear={clear} />
      <UserList users={users} />
    </div>
  );
};
